/* eslint-disable @typescript-eslint/no-unused-vars */
import { defineComponent, h, resolveComponent } from "vue";
import FlvVideo from "./FlvVideo.vue";
import WebRTCVideo from "./WebRTCVideo.vue";
import JSWebrtcVideo from "./JSWebrtcVideo.vue";
import Empty from "../Empty";

const NoVideo = defineComponent({
	props: {
		height: {
			type: String,
			default: "35vh"
		}
	},
	setup(props) {
		return () => {
			return (
				<div class="flex items-center" style={{ height: props.height || "35vh", boxSizing: "border-box" }}>
					<Empty showButton={false} title="暂无视频信息" subtitle="请检查设备配置及网格环境。" />
				</div>
			);
		};
	}
});
export default defineComponent({
	components: {
		noVideo: NoVideo,
		jswebrtc: JSWebrtcVideo,
		webrtc: WebRTCVideo, //defineAsyncComponent(() => import("./WebRTCVideo.vue")),
		webvideo: FlvVideo //defineAsyncComponent(() => import("./FlvVideo.vue"))
	},
	props: {
		height: {
			type: String,
			default: "35vh"
		},
		videoUrl: String
	},
	emits: [],
	setup(props, { attrs }) {
		const comp = ref("noVideo");
		let videoUrl = props.videoUrl || "";
		if (videoUrl.endsWith(".flv") || videoUrl.endsWith(".m3u8") || videoUrl.endsWith(".rtmp") || videoUrl.endsWith(".mp4")) {
			comp.value = "webvideo";
		} else if (videoUrl.startsWith("webrtc")) {
			comp.value = "jswebrtc";
		}
		console.log(videoUrl, comp.value);
		return () => {
			return h(resolveComponent(comp.value), { videoUrl: videoUrl, height: props.height });
			// return <FlvVideo class="h-full w-full" style="min-width:500px;min-height:400px"></FlvVideo>;
			// return <WebRTCVideo class="h-full w-full" style="min-width:500px;min-height:400px"></WebRTCVideo>;
		};
	}
});
